<template>
  <div>
    <div class="header">
      <span style="margin-left: 20px">关键字</span>
      <el-input
        placeholder="请输入关键字"
        v-model="query"
        style="width: 200px; margin-left: 10px"
        clearable
      ></el-input>
      <el-button
        type="primary"
        style="margin-left: 20px"
        size="small"
        @click="
          currentPage = 1
          getBusinesses()
        "
      >
        关键字搜索
      </el-button>
    </div>
    <el-table
      style="overflow: auto"
      height="580"
      :data="forms"
      stripe
      border
      highlight-current-row
    >
      <el-table-column type="index" width="40"></el-table-column>
      <el-table-column label="表单名" prop="BF_Name" />
      <el-table-column label="映射代码" prop="BF_Code"></el-table-column>
      <el-table-column label="备注" prop="BF_Info"></el-table-column>
      <el-table-column fixed="right" label="操作">
        <template slot-scope="scope">
          <el-button
            type="text"
            size="small"
            @click="editForm(scope.row.BF_ID)"
            icon="el-icon-edit"
          >
            配置
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <div style="width: 100%; height: 40px">
      <el-pagination
        layout="total,prev,pager,next,sizes"
        style="float: right"
        background
        :current-page.sync="currentPage"
        :total="total"
        :page-size="pageSize"
        :page-sizes="[10, 15, 20]"
        @size-change="
          (val) => {
            pageSize = val
            getBusinesses()
          }
        "
        @current-change="getBusinesses()"
      ></el-pagination>
    </div>
  </div>
</template>
<script>
import { getBusinesses } from '@/api/flowCenter/business/businessManage'
export default {
  data: function () {
    return {
      query: '',
      forms: [],
      newForm: {},
      currentPage: 1,
      pageSize: 10,
      total: 0,
    }
  },
  methods: {
    getBusinesses: function () {
      getBusinesses().then(({ data }) => {
        this.forms = data
      })
    },
    editForm(id) {
      this.$router.push({
        name: 'editBusinessPage',
        query: { id },
      })
    },
  },
  created: function () {
    this.getBusinesses()
  },
}
</script>
<style>
.el-drawer.rtl {
  overflow: scroll;
}
</style>
<style scoped>
.header {
  width: 100%;
  padding-top: 10px;
  padding-bottom: 10px;
  height: auto;
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  background: #ffffff;
  border-radius: 5px;
  border-bottom: #f4f8ff 2px solid;
  display: flex;
  margin-bottom: 11px;
  align-items: center;
}
</style>
